<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in imgItem" :key="index">
				<image class="img" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="detialText" v-for="(item,index) in dataList" :key="index">
			<view class="shop-money">￥{{item.pprice}}</view>
			<view class="shop-name">{{item.name}}</view>
			<view class="shop-info">
				<view class="shop-sale" style="font-size: 18rpx;">销量：{{item.sale}}</view>
				<view class="repertory" style="font-size: 18rpx;">库存：{{item.reportory}}</view>
				<view class="isdelivery" style="font-size: 18rpx;">{{item.delivery}}</view>
			</view>
			<text class="text">{{item.text}}</text>
		</view>
		<Lines/>
		<view class="bigImage" v-for="(item,idx) in bigImage" :key="idx+'1'">
			<image class="image-item" :src="item" mode=""></image>
		</view>
	</view>
</template>

<script>
	import Lines from "@/components/common/Lines.vue"
	export default {
		props:{
			dataList:Array
		},
		data(){
			return{
				// 顶部详情轮播图
				imgItem:[],
				//底部大图
				bigImage:[]
			}
		},
		mounted() {
			this.dataList.forEach((item,index)=>{
				this.imgItem.push(item.detialImgUrl01,item.detialImgUrl02,item.detialImgUrl03)
				this.bigImage.push(item.bigImage01,item.bigImage02,item.bigImage03)
			})
		},
		components:{
			Lines,
		}
	}
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	top: -20rpx;
}
.swiper {
	width: 100%;
	height: 400rpx;
}
.img {
	width: 100%;
	height:100%;
}
.detialText {
	padding: 20rpx;
	width: 95%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.shop-money {
	font-size: 26rpx;
	color: red;
}
.shop-name {
	font-size: 28rpx;
	color: black;
}
.shop-info {
	display: flex;
	color: #a2a2a2;
	justify-content: space-between;
}
.text {
	margin-top: 20rpx;
	color: #a2a2a2;
	font-size: 24rpx;
}
.bigImage {
	width: 100%;
	margin-top: 20rpx;
}
.image-item {
	width: 100%;
	height: 360rpx;
}
</style>